<template>
    <div class="row g-2" >
        <bi-card title="模板路径">
            <div class="template-theme">
                <bi-input v-model="theme" style="flex:1;" placeholder="请选择模板文件夹" readonly >
                    <template #after>
                        <bi-button icon="fa-folder-open" @click="selectThemeFolder"  type="light">选择</bi-button>
                    </template>
                </bi-input>
            </div>
        </bi-card>

        <bi-card title="模板设置">
            <bi-form ref="form" >
                
                <bi-form-item label="首页模板" >
                    <web-template v-model="formData.index_template" required></web-template>
                </bi-form-item>

                <bi-form-item label="默认栏目模板">
                    <web-template v-model="formData.part_template"></web-template>
                </bi-form-item>

                <bi-form-item label="默认文章模板" >
                    <web-template v-model="formData.article_template"></web-template>
                </bi-form-item>
                <bi-form-item label="错误模板" >
                    <web-template v-model="formData.error_template"></web-template>
                </bi-form-item>
                <bi-form-item label="404模板" >
                    <web-template v-model="formData.page404_template"></web-template>
                </bi-form-item>
                

            </bi-form>
            
            <template #footer>
                <bi-button icon="fa-save" @click="saveSetting"  type="primary">保存</bi-button>
            </template>
        </bi-card>
    </div>
</template>



<script>
import webTemplate from '../field/template.vue';
export default{
    components:{
        
        webTemplate
    },
    data(){
        let formData = {
            asset:'',
            index_template:'',
            part_template:'',
            article_template:'',
            error_template:'',
            page404_template:'',
        }

        this.$assign(formData,this.item);

        let theme = this.item.theme??'';

        return {
            formData,
            theme
        }
    },
    props:{
        item:Object
    },
    watch:{
        theme(value){
            if (value=='') return;
            this.$loading();
            this.$ajax({
                url:this.$url({controller:'admin.setting',action:'saveThemePath'}),
                data:{
                    path:value
                },
                success:(res)=>{
                    this.$toast('保存成功');
                },
                fail:(msg)=>{
                    this.$alert('保存失败');
                    this.theme = '';
                },
                over:()=>{
                    this.$loading(false);
                }
            });
        }
    },
    methods:{
        saveSetting(){
            if (this.$refs.form.check()){
                this.$ajax({
                    url:this.$url({controller:'admin.setting',action:'saveTemplate'}),
                    data:{
                        ...this.formData
                    },
                    success:(res)=>{
                        this.$toast('保存成功');
                    }
                });
            }
        },
        selectThemeFolder(){
            this.$admin.systemFile((value)=>{
                this.theme = '/' + value.file;
            },{
                title:'选择模板文件夹',
                folder:true,
                file:false
            })
        }
    }
}

</script>

<style>
.template-theme{
    display: flex;
    align-items: center;
    gap: 10px;
}
</style>